<template>
	<view class="animated fadeIn faster">
		<view class="px-3 py-4">
			<view class="d-flex d-flex-between d-flex-middle bg-fff rounded15 py-3 px-3 mb-3" @click="openExam">
				<text class="color5c font26">切换题库</text>
				<view class="d-flex d-flex-middle">
					<text class="color5c font26 mr">{{exam.category_name}}</text>
					<text class="iconfont icon-youjiantou font28 color999"></text>
				</view>
			</view>
			<view class="d-flex d-flex-between d-flex-middle bg-fff rounded15 py-3 px-3 mb-3">
				<text class="color5c font26">考试日期</text>
				<view class="d-flex d-flex-middle">
					<text class="color5c font26 mr">{{exam.exam_date || '无'}}</text>
				</view>
			</view>
			<view class="d-flex d-flex-between d-flex-middle bg-fff rounded15 py-3 px-3 mb-3">
				<text class="color5c font26">随机练习题数</text>
				<view class="d-flex d-flex-middle d-flex-item">
					<picker @change="randomPickerChange" :value="randomIndex" :range="randomNumList" range-key="num" class="d-flex-item d-flex d-flex-end d-flex-middle">
						<text class="font26 color5c">{{randomNumList[randomIndex].num}}</text>
						<text class="iconfont icon-youjiantou font28 color999"></text>
					</picker>
				</view>
			</view>
			
			<!-- <picker @change="schoolPickerChange" :value="schoolIndex" :range="list" range-key="name" class="d-flex-item pl-2">
				<text class="font32" :class="list[schoolIndex].id==0?'colorhold':'color5c'">{{list[schoolIndex].name}}</text>
			</picker>
			<view class="px-3">
				<text class="iconfont icon-xiajiantou main-color font36"></text>
			</view> -->
			
			<view class="d-flex d-flex-between d-flex-middle bg-fff rounded15 py-3 px-3 mb-3">
				<text class="color5c font26">答对几次移除错题</text>
				<view class="d-flex d-flex-middle">
					<text class="color5c font26 mr">1次</text>
				</view>
			</view>
			
			<!-- <view class="d-flex d-flex-between d-flex-middle bg-fff rounded15 px-3 mb-3 py-2">
				<text class="color5c font26">自动下一题</text>
				<switch :checked="autoNext" style="transform: scale(.8);" @change="autoNext = $event.detail.value? true:false"/>
			</view> -->
			
			<view class="d-flex d-flex-between d-flex-middle bg-fff rounded15 py-3 px-3 mb-3" @click="clearAllRecords">
				<text class="color5c font26">清理题库做题记录</text>
				<text class="iconfont icon-youjiantou font28 color999"></text>
			</view>
			
		</view>
		<uni-popup ref="popupLeft" type="left">
			<view class="popup-left">
				<view class="pt-4 pb-3 mb-2 shadow">
					<view class="d-flex d-flex-center mb-3">
						<text class="font-bold font36 main-color">切换题库</text>
					</view>
					<view class="d-flex">
						<view class="d-flex-item d-flex d-flex-center" @click="getIsAll">
							<text class="main-color" :class="{'font-bold':isOpen==false}">相关课题</text>
						</view>
						<view class="d-flex-item d-flex d-flex-center" @click="getIsOpen">
							<text class="main-color" :class="{'font-bold':isOpen}">我已开通</text>
						</view>
					</view>
				</view>
				
				<view class="p-2 d-flex d-flex-wrap">
					<view class="border-main bg-yellow-blue rounded50 d-flex d-flex-middle d-flex-center py-1 mb-2 mr-2" style="width: 230rpx;" v-for="topic in topicList" :key="topic.id" @click="setTopic(topic.id)">
						<text>{{topic.name}}</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	import {mapState} from "vuex"
	import { userApi } from '@/http/userApi.js'
	export default {
		data() {
			return {
				topicList:[],
				randomIndex:0,
				randomNumList:[
					{num:20},{num:40},{num:60}
				],
				isOpen:false,
				autoNext:true,
				autoSave:false,
				exam:{
					
				}
			}
		},
		computed: {
		  ...mapState({
		    loginState: state => state.loginState,
		    cid: state => state.cid
		  }),
		},
		onReady() {
			this.getStatictis()
		},
		methods: {
			openExam(){
				let that = this
				if(that.loginState){
					that.$refs.popupLeft.open('left')
					if(that.topicList.length == 0){
						that.getAllTopic()
					}
				}else{
					uni.showToast({
						title: '未登录，请先登录！',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/subPages/login/login'
						})
					}, 1500)
				}
			},
			getIsAll(){
				this.isOpen = false
				this.getAllTopic()
			},
			getIsOpen(){
				this.isOpen = true
				this.getIsOpenTopic()
			},
			getAllTopic(){
				let that = this
				uni.showLoading({
					title:'加载中...'
				})
				userApi.getAllTopic().then((res)=>{
					uni.hideLoading()
					that.topicList = res
				}).catch((e)=>{
					uni.hideLoading()
					console.log('exame-cate-e',e)
				})
			},
			getIsOpenTopic(){
				let that = this
				uni.showLoading({
					title:'加载中...'
				})
				userApi.getIsOpenTopic().then((res)=>{
					uni.hideLoading()
					that.topicList = res
				}).catch((e)=>{
					uni.hideLoading()
					console.log('is-open-topic',e)
				})
			},
			getStatictis(){
				let that = this
				userApi.getQuestionSet().then((res)=>{
					console.log('exam',res)
					that.exam = res
					that.randomIndex = that.randomNumList.findIndex(random => random.num == res.random_question_count);
				})
			},
			randomPickerChange(e){
				let that = this
				that.randomIndex = e.detail.value
				userApi.setQuestionNum({'random_question_count':that.randomNumList[that.randomIndex].num}).then((res)=>{
					console.log('res',res)
				})
			},
			clearAllRecords(){
				return uni.showToast({
					title:'清理成功！'
				})
				uni.showLoading({
					title:'操作中...',
					mask:true
				})
				userApi.clearQuestionRecords().then((res)=>{
					console.log('res',res)
					uni.showToast({
						title:'清理成功！'
					})
					uni.hideLoading()
				}).catch((e)=>{
					uni.hideLoading()
				})
			},
			setTopic(cid){
				let that = this
				uni.showLoading({
					title:'加载中...'
				})
				userApi.staticTopic(cid).then((res)=>{
					uni.hideLoading()
					that.$refs.popupLeft.close()
					uni.setStorageSync('topic_id',cid)
					store.commit('setCid', cid)
					that.getStatictis()
				}).catch((e)=>{
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style scoped>
.popup-left{
	position: relative;
	width: 580rpx;
	min-height: 100vh;
	background-color: #fff;
}
.popup-more{
	position: absolute;
	background-color: #ffffff;
	padding: 20rpx 0 50rpx;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100001;
}
</style>
